<script>
import { toRefs } from 'vue';
import useDailyTasks from 'hooks/useDailyTasks';
export default {
  props: ['collapseCtrl', 'state'],
  setup(props) {
    const { state } = toRefs(props);

    const { handlePrevDay, handleNextDay } = useDailyTasks(state.value);

    return {
      task: state.value.task,
      handlePrevDay,
      handleNextDay,
    };
  },
};
</script>
<template>
  <el-collapse v-model="collapseCtrl">
    <el-collapse-item title="今日任务" name="1">
      <el-card class="box-card">
        <div class="card-info">{{ task.dateDisplayed }}</div>
        <div class="card-info">学习：{{ task.learning }}</div>
        <div class="card-info">复习：{{ task.review }}</div>
      </el-card>
      <div class="btn-wrapper">
        <el-button type="text" @click="handleNextDay"><i class="el-icon-arrow-left el-icon--left" />前一天</el-button>
        <el-button type="text" @click="handlePrevDay">后一天<i class="el-icon-arrow-right el-icon--right" /></el-button>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>
